<!--
 * @Author: luoqi
 * @Date: 2022-04-19 17:16:24
 * @LastEditors: luoqi
 * @LastEditTime: 2022-05-09 17:15:45
 * @Description: 
-->
<template>
  <div style="background-color: #f2f7fb">
    <el-header class="Myheader" :style="stautsBar ? 'overflow:hidden;' : ''">
      <!-- 我的主页 -->

      <!-- 他人主页 -->
      <div class="position_header">
        <el-row class="headinto heAndShe" v-if="!stautsBar">
          <el-col :span="2" class="headPhoto">
            <img :src="info.headImg" alt="" />
          </el-col>
          <el-col :span="8" class="headmsg">
            <div>
              <div>{{ info.nickname }}</div>
              <div class="studentID">
                <span>{{ info.phone }}</span>
                <span>&nbsp;{{ info.age && info.age + "岁" }}</span
                >&nbsp;<span>{{ info.occupation }}</span>
              </div>
            </div>
            <div>
              <el-tag color="#E8471A" v-if="!isConcern" @click="tagesClick(1)">
                <i class="el-icon-plus"></i> 关注</el-tag
              >
              <el-tag
                type="danger"
                style="color: #e8471a; fontweight: bold"
                effect="plain"
                v-else
                @click="tagesClick(1)"
              >
                <i class="el-icon-check"></i>已关注</el-tag
              >
              <el-tag color="#3781C3" @click="tagesClick(2)">
                <i class="iconfont icon-pinglun"></i> 私信</el-tag
              >
            </div>
          </el-col>
        </el-row>
      </div>
    </el-header>
    <el-main class="Mymain">
      <!-- 他人主页 -->
      <div style="height: 90px" v-if="!stautsBar"></div>

      <el-row>
        <el-col :span="7" class="cardLeft">
          <div class="cardLeft_one">
            <a
              herf="javascript:void(0);"
              @click="
                changeRouter({
                  path: '/main/herhome/mydisease',
                  query: { id: id },
                })
              "
            >
              <div>{{ disNum }}</div>
              <div>收藏疾病</div>
            </a>
          </div>
          <div
            v-for="(item, index) in colorCls"
            :key="index"
            :class="item.color"
            @click="showCol(item.name)"
          >
            <div @click="showCol(item.name)">{{ item.num }}</div>
            <div>{{ item.name }}</div>
          </div>
          <hr style="width: 100%; margin: 10px 20px" />
          <div class="cardLeft_three">个人简介</div>
          <div class="cardLeft_four">
            {{ info.personalizedSignature || "暂无信息" }}
          </div>
          <div class="cardLeft_three">关注与粉丝</div>
          <div
            class="cardLeft_five"
            v-for="(item, index) in fourArr2"
            :key="index + 20"
            @click="showCol(item.name)"
          >
            <a
              herf="javascript:void(0);"
              class="cardLeft_five_a"
              @click="changeRouter(item.to)"
            >
              <div class="cardLeft_five_a_one">
                <i :class="item.class1"></i>
                <span class="textblack">{{ item.name }}</span>
              </div>
              <span :class="item.class2">{{ item.num }}</span>
            </a>
          </div>
          <div class="cardLeft_three">他的经验</div>
          <div
            class="cardLeft_five"
            v-for="(item, index) in fourArr"
            :key="index + 10"
            @click="showCol(item.name)"
          >
            <a herf="javascript:void(0);" class="cardLeft_five_a">
              <div class="cardLeft_five_a_one">
                <i :class="item.class1"></i>
                <span class="textblack">{{ item.name }}</span>
              </div>
              <span :class="item.class2">{{ item.num }}</span>
            </a>
          </div>
          <div class="cardLeft_three">其他</div>
          <div class="cardLeft_five">
            <a
              herf="javascript:void(0);"
              class="cardLeft_five_a"
              @click="
                changeRouter({
                  path: '/main/herhome/myhistory',
                  query: { id: id },
                })
              "
            >
              <div class="cardLeft_five_a_one">
                <i class="iconfont icon-shoucang3 color_three"></i>
                <span class="textblack">收藏历史记录</span>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="15" :offset="1" class="cardRight">
          <div v-if="isPrivacy">
            <h1 style="color: #aaa">该用户为隐私用户</h1>
            <h3 style="color: #aaa">（只展示该用户发布的经验）</h3>
            <br />
            <component
              class="exp"
              :is="'exprec'"
              isMy="true"
              :expList="expList"
            ></component>
          </div>
          <template v-else>
            <router-view
              v-if="collection.historyList && !isShowExp"
              :id="id"
              :collection="collection"
            ></router-view>
            <component
              class="exp"
              v-if="collection.historyList && isShowExp"
              :is="'exprec'"
              isMy="true"
              :expList="expList"
            ></component>
          </template>
        </el-col>
      </el-row>
    </el-main>
    <!-- 聊天框 -->
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <MyChat :herInfo="info" v-if="dialogVisible" />
    </el-dialog>
  </div>
</template>

<script>
import Exprec from "../components/Exprec.vue";
import MyChat from "../components/myHome/MyChat.vue";
export default {
  name: "MyHome",
  components: {
    Exprec,
    MyChat,
  },
  data() {
    return {
      id: null, //用户id
      isPrivacy: false, //隐私用户
      //个人信息
      info: { name: null, img: null, phone: null },
      disNum: 0, //收藏疾病数量
      collection: {}, //收藏信息
      isConcern: false, //是否关注
      expList: [], //收藏经验
      isShowExp: false, //是否显示经验
      colorCls: [
        {
          color: "cardLeft_two one",
          num: 25,
          name: "收藏经验",
          to: "",
        },
        {
          color: "cardLeft_two two",
          num: 16,
          name: "收藏知识",
          to: {},
        },
        {
          color: "cardLeft_two three",
          num: 18,
          name: "收藏视频",
          to: { path: "/main/herhome/myvideo", query: { id: this.id } },
        },
      ],
      fourArr: [
        {
          class1: "iconfont icon-fabu color_one",
          class2: "color_one",
          name: "发布经验",
          num: 5,
          to: "/main/myexp/relexpr",
        },
        {
          class1: "iconfont icon-shoucang3 color_two",
          class2: "color_two",
          name: "收藏经验",
          num: 10,
          to: "/main/myexp/expdra",
        },
      ],
      fourArr2: [
        {
          class1: "iconfont el-icon-thumb color_four",
          class2: "color_four",
          name: "关注列表",
          num: 5,
          to: "/main/herhome/myconcern",
        },
        {
          class1: "iconfont el-icon-magic-stick color_three",
          class2: "color_three",
          name: "粉丝列表",
          num: 10,
          to: "/main/herhome/myfans",
        },
      ],
      dialogVisible: false,
    };
  },
  created() {
    // console.log(new Date().getHours() + ":" + new Date().getMinutes());
    
    this.stautsBar = false;
    if (!this.$route.query.id) {
      //没有id
      this.$router.go(-1);
      return;
    }
    if (
      this.$route.path == "/main/herhome/myall" ||
      !this.$store.state.herData.collection
    ) {
      this.id = this.$route.query.id;
      // console.log(this.collection.historyList);
      this.getData();
      this.fourArr2[0].to = {
        path: "/main/herhome/myconcern",
        query: { id: this.id },
      };
      this.fourArr2[1].to = {
        path: "/main/herhome/myfans",
        query: { id: this.id },
      };
    }
  },
  mounted() {},
  watch: {
    isPrivacy: {
      handler(newData, oldData) {
        this.id = this.$route.query.id;
        if (!this.isPrivacy) {
          //隐私用户获取发布的经验
          this.showCol("发布经验");
        }
      },
      immediate: true,
    },
  },
  // updated: function () {
  //   this.$nextTick(function () {
  //     //  仅在整个视图都被重新渲染之后才会运行的代码
  //     let div = document.getElementsByClassName("model_main_right_top")[0];
  //     let liaotian = document.getElementById("liaotian");
  //     div.scrollTop = liaotian.offsetHeight;
  //   });
  // },
  methods: {
    changeRouter(to) {
      if (this.isPrivacy) {
        return;
      }
      //路由跳转
      this.$router.push(to);
    },
    getData() {
      //获取用户信息
      this.$store.dispatch("getHerData", this.id).then((res) => {
        console.log(res);
        this.info = res.data;
        this.disNum = res.detail.sicknessCollectionNum;
        this.colorCls[0].num = res.detail.experienceCollectionNum;
        this.colorCls[1].num = res.detail.knowledgeCollectionNum;
        this.colorCls[2].num = res.detail.videoCollectionNum;
        this.fourArr[0].num = res.detail.experiencePublishNum;
        this.fourArr[1].num = res.detail.experienceCollectionNum;
        this.fourArr2[0].num = res.detail.concernNum;
        this.fourArr2[1].num = res.detail.fansNum;
        if (!res.collection) {
          this.isPrivacy = true;
        } else {
          //收藏信息
          this.collection = res.collection;
          this.expList = res.collection.experienceList;
          //其他信息
          this.isConcern = res.isConcern;
        }
      });
    },
    redact() {
      //跳转编辑资料路由
      this.$router.push("/main/accset/myinfo");
    },
    //关注和私信 index：1为关注，2位私信
    tagesClick(index) {
      if (index === 2) {
        //聊天
        this.dialogVisible = true;
      } else if (index === 1) {
        //关注
        this.addConcern();
      }
    },
    //关注
    addConcern() {
      this.$axios({
        method: "post",
        url: "/user/concernOrCancel",
        data: this.$qs.stringify({
          concernId: this.id,
          num: this.isConcern ? -1 : 1,
        }),
      }).then((res) => {
        console.log(res);
        if (res.code != "200") {
          this.$message.error(res.msg);
        } else {
          this.$message.success("操作成功");
          this.isConcern = !this.isConcern;
        }
      });
    },

    showCol(name) {
      this.isShowExp = false;
      //隐私用户
      if (name == "收藏经验") {
        console.log(1);
        if (this.isPrivacy) {
          return;
        }
        setTimeout(() => {
          this.expList = this.$store.state.herData.collection.experienceList;
          this.isShowExp = true;
        }, 500);
      } else if (name == "收藏知识") {
        if (this.isPrivacy) {
          return null;
        }
        this.isShowExp = false;
        this.$router.push({
          path: "/main/herhome/myknowledeg",
          query: { id: this.id },
        });
      } else if (name == "收藏视频") {
        if (this.isPrivacy) {
          return;
        }
        this.isShowExp = false;
        this.$router.push({
          path: "/main/herhome/myvideo",
          query: { id: this.id },
        });
      } else if (name == "发布经验") {
        this.isShowExp = false;
        this.$axios({
          method: "get",
          url: "/experience/selectByType",
          params: {
            userId: this.id,
            size: 99,
            status: 1,
          },
        }).then((res) => {
          console.log(res);
          if (res.code != "200") {
            this.$message.error(res.msg);
          } else {
            this.isShowExp = true;
            this.expList = res.data;
          }
        });
      } else {
        if (this.isPrivacy) {
          return;
        }
        this.isShowExp = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../less/myhome.less");
</style>